<template>
  <base-layout>
    <div class="class-detail">
      <a-card :bordered="false">
        <template #title>
          <div class="card-title">
            <a-button @click="handleBack">
              <template #icon><arrow-left-outlined /></template>
              返回
            </a-button>
            <span class="title-text">班级详情</span>
          </div>
        </template>

        <!-- 基本信息卡片 -->
        <a-descriptions title="基本信息" bordered>
          <a-descriptions-item label="班级名称">{{ classInfo.name }}</a-descriptions-item>
          <a-descriptions-item label="年级">{{ classInfo.grade }}级</a-descriptions-item>
          <a-descriptions-item label="专业">{{ classInfo.major }}</a-descriptions-item>
          <a-descriptions-item label="学业导师">{{ classInfo.teacher }}</a-descriptions-item>
          <a-descriptions-item label="学生人数">{{ classInfo.studentCount }}人</a-descriptions-item>
          <a-descriptions-item label="创建时间">{{ classInfo.createTime }}</a-descriptions-item>
          <a-descriptions-item label="备注" :span="3">{{ classInfo.remark }}</a-descriptions-item>
        </a-descriptions>

        <!-- 学生列表 -->
        <div class="section-title">学生列表</div>
        <div class="table-actions">
          <a-input-search
            v-model:value="searchText"
            placeholder="搜索学生姓名/学号"
            style="width: 300px"
            @search="onSearch"
          />
        </div>
        <a-table
          :columns="columns"
          :data-source="students"
          :loading="loading"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a-space>
                <a @click="handleViewStudent(record)">查看</a>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>
  </base-layout>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter, useRoute } from 'vue-router'
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
import BaseLayout from '@/components/layout/BaseLayout.vue'

const router = useRouter()
const route = useRoute()
const loading = ref(false)
const searchText = ref('')

// 班级信息
const classInfo = reactive({
  name: '',
  grade: '',
  major: '',
  teacher: '',
  studentCount: 0,
  createTime: '',
  remark: ''
})

// 表格列定义
const columns = [
  {
    title: '学号',
    dataIndex: 'studentId',
    key: 'studentId',
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender',
  },
  {
    title: '联系电话',
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email',
  },
  {
    title: '操作',
    key: 'action',
    width: 120,
  }
]

const students = ref([])
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: total => `共 ${total} 条记录`
})

// 获取班级详细信息
const fetchClassDetail = async (id) => {
  try {
    // 模拟API调用
    const mockData = {
      name: '软件工程2班',
      grade: '2023',
      major: '软件工程',
      teacher: '张老师',
      studentCount: 35,
      createTime: '2023-09-01',
      remark: '这是一个示例班级'
    }
    Object.assign(classInfo, mockData)
  } catch (error) {
    message.error('获取班级信息失败')
  }
}

// 获取学生列表
const fetchStudents = async () => {
  loading.value = true
  try {
    // 模拟API调用
    const mockData = [
      {
        key: '1',
        studentId: '2023001',
        name: '张三',
        gender: '男',
        phone: '13800138000',
        email: 'zhangsan@example.com'
      },
      {
        key: '2',
        studentId: '2023002',
        name: '李四',
        gender: '女',
        phone: '13800138001',
        email: 'lisi@example.com'
      }
    ]
    students.value = mockData
    pagination.total = mockData.length
  } catch (error) {
    message.error('获取学生列表失败')
  } finally {
    loading.value = false
  }
}

const handleBack = () => {
  router.push('/class-manage')
}

const handleViewStudent = (record) => {
  // TODO: 跳转到学生详情页面
  console.log('查看学生:', record)
}

const onSearch = (value) => {
  searchText.value = value
  pagination.current = 1
  fetchStudents()
}

const handleTableChange = (pag) => {
  pagination.current = pag.current
  pagination.pageSize = pag.pageSize
  fetchStudents()
}

onMounted(() => {
  const classId = route.params.id
  if (classId) {
    fetchClassDetail(classId)
    fetchStudents()
  } else {
    message.error('班级ID不存在')
    router.push('/class-manage')
  }
})
</script>

<style scoped>
.class-detail {
  padding: 24px;
  background: #f0f2f5;
  min-height: 100vh;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.title-text {
  font-size: 16px;
  font-weight: 500;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  margin: 24px 0 16px;
  color: rgba(0, 0, 0, 0.85);
}

.table-actions {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
}

:deep(.ant-descriptions) {
  background: #fff;
  padding: 24px;
  border-radius: 2px;
}

:deep(.ant-descriptions-title) {
  font-size: 16px;
  font-weight: 500;
}

:deep(.ant-descriptions-item-label) {
  width: 120px;
  font-weight: 500;
}
</style> 